<template>
<div>
  <el-row :gutter="10">
    <el-col :span="6">
      <!-- 第一个 Card  -->
     <el-card> 
      <Detail title="访问量" count="88460">
        <template slot="charts">
          <span>周同比 &nbsp; 56.67% </span>
          <svg t="1662434692395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3566" width="16" height="16"><path d="M768 384L512 128 256 384h192v512h128V384z" p-id="3567" fill="#d81e06"></path></svg>
          &nbsp;
          <span>日同比 &nbsp; 19.16% </span>
          <svg t="1662434662104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2454" width="16" height="16"><path d="M768 640l-256 256-256-256h192V128h128v512z" p-id="2455" fill="#1afa29"></path></svg>
        </template>

        <template slot="footer">
          <span>日销售额： ￥12658</span>
        </template>
      </Detail> 
     </el-card>
    </el-col>

    <el-col :span="6">
      <!-- 第二个 Card  -->
      <el-card>
        <Detail title="访问量" count="88460">
          <template slot="charts">
            <lineChart></lineChart>
          </template>

          <template slot="footer">
            <span>日访问量：1234</span>
          </template>
        </Detail>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!-- 第三个 Card  -->
      <el-card>
        <Detail title="支付笔数" count="88460">
          <template slot="charts">
            <barChart></barChart>
          </template>
          
          <template slot="footer">
            <span>转化率 65%</span>
          </template>
        </Detail>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!-- 第四个 Card  -->
      <el-card>
        <Detail title="运营活动效果" count="78%">
          <template slot="charts">
            <progressChart></progressChart>
          </template>

          <template slot="footer">
            <span>周同比 &nbsp; 12% </span>
            <svg t="1662434692395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3566" width="16" height="16"><path d="M768 384L512 128 256 384h192v512h128V384z" p-id="3567" fill="#d81e06"></path></svg>
            &nbsp;
            <span>日同比 &nbsp; 11% </span>
            <svg t="1662434662104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2454" width="16" height="16"><path d="M768 640l-256 256-256-256h192V128h128v512z" p-id="2455" fill="#1afa29"></path></svg>
          </template>
        </Detail> 
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import Detail from './Detail'
import lineChart from './lineChart'
import barChart from './barChart'
import progressChart from './progressChart'
export default {
  components: {
    Detail,
    lineChart,
    barChart,
    progressChart
  },
  name: 'Card' ,
   data () { 
      return {}
    }

}
</script>

<style   scoped></style>

